<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .basic {
            width: 400px;
            height: 100px;
            border: 1px solid black;
        }

        .happy {
            border: 4px solid red;
            background-color: rgba(255, 255, 0, 0.644);
            background: linear-gradient(30deg, yellow, pink, orange, yellow);
        }

        .sad {
            border: 4px dashed rgb(2, 197, 2);
            background-color: gray;
        }

        .normal {
            background-color: skyblue;
        }

        .atguigu1 {
            background-color: yellowgreen;
        }

        .atguigu2 {
            font-size: 30px;
            text-shadow: 2px 2px 10px red;
        }

        .atguigu3 {
            border-radius: 20px;
        }
    </style>
    <script type="text/javascript" src="../js/vue.js"></script>
</head>

<body>

    <div id="root">
        <div class="basic" v-bind:class="mood" @click="changeMod">{{name}}</div>
        <br/>

        <div class="basic" v-bind:class="classObj">{{name}}</div>

        <br/>

        <div class="basic" v-bind:style="styleObj">{{name}}</div>
    </div>

    <script type="text/javascript">
        new Vue({
            el: '#root',
            data: {
                name: '尚硅谷',
                mood: 'normal',
                classArr: ['atguigu1','atguigu2'],
                classObj:{
                    atguigu1:false,
                    atguigu2:true,
                    atguigu3:true
                },
                styleObj:{
                    fontSize: '40px'
                }
            },
            methods: {
                changeMod() {
                    const arr = ['happy','sad','normal'];
                    const index = Math.floor(Math.random()*3);
                    this.mood = arr[index];
                }
            }
        })
    </script>


</body>

</html>